// 人员查询表单
import React from 'react'
import { Form, Row, Col, Input, Button, Select, message } from 'antd'
import { connect } from 'dva'
import './findForm.css'
import Axios from 'axios'
const { Option } = Select

class AdvancedSearchForm extends React.Component {
  state = {
    loading: false
  }
  // 渲染标签的方法
  getFields () {
    // 拿出设定规则的方法
    const { getFieldDecorator } = this.props.form
    const children = []
    let { seachLish, required } = this.props
    if (required) {
      for (let i = 0; i < seachLish.length; i++) {
        // 判断类型为input的输入框
        if (seachLish[i].type === 'input') {
          children.push(
            <Col span={6} key={i} className='colbox' xs={16} sm={12} md={12} lg={8} xl={6}>
              <Form.Item label={seachLish[i].ch_name} className='col-ipt' labelCol={{ span: 8, offset: 0 }}>
                {/* 设定规则啥的 */}
                {getFieldDecorator(`${seachLish[i].name}`, {
                  rules: [
                    {
                      required: true,
                      message: '此为必填项!'
                    },
                  ],
                })(<Input allowClear={true} />)}
              </Form.Item>
            </Col>
          )
        }
        // 判断类型为select的选择框
        else if (seachLish[i].type === 'select') {
          children.push(
            <Col span={6} key={i} className='colbox' xs={16} sm={12} md={12} lg={8} xl={6}>
              <Form.Item label={seachLish[i].ch_name} className='col-ipt' labelCol={{ span: 8, offset: 0 }}>
                {getFieldDecorator(`${seachLish[i].name}`, {
                  rules: [
                    {
                      message: 'Input something!',
                    },
                  ],
                })(<Select
                  showSearch
                  placeholder='请选择'
                  allowClear={true}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {
                    seachLish[i].option.map((item, index) => {
                      return (
                        <Option key={index} value={item}>{item}</Option>
                      )
                    })
                  }
                </Select>)}
              </Form.Item>
            </Col>
          )
        }
      }
    } else {
      for (let i = 0; i < seachLish.length; i++) {
        // 判断类型为input的输入框
        if (seachLish[i].type === 'input') {
          children.push(
            <Col span={6} key={i} className='colbox' xs={16} sm={12} md={12} lg={8} xl={6}>
              <Form.Item label={seachLish[i].ch_name} className='col-ipt' labelCol={{ span: 8, offset: 0 }}>
                {/* 设定规则啥的 */}
                {getFieldDecorator(`${seachLish[i].name}`)(<Input allowClear={true} />)}
              </Form.Item>
            </Col>
          )
        }
        // 判断类型为select的选择框
        else if (seachLish[i].type === 'select') {
          children.push(
            <Col span={6} key={i} className='colbox' xs={16} sm={12} md={12} lg={8} xl={6}>
              <Form.Item label={seachLish[i].ch_name} className='col-ipt' labelCol={{ span: 8, offset: 0 }}>
                {getFieldDecorator(`${seachLish[i].name}`)(<Select
                  showSearch
                  placeholder='请选择'
                  allowClear={true}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {
                    seachLish[i].option.map((item, index) => {
                      return (
                        <Option key={index} value={item}>{item}</Option>
                      )
                    })
                  }
                </Select>)}
              </Form.Item>
            </Col>
          )
        }
      }
    }


    return children
  }
  getBtn () {
    let { btnList } = this.props
    let children = []
    if (btnList.length > 1) {
      for (let i = 0; i < btnList.length; i++) {
        if (btnList[i].type === 'button') {
          //  插入最后的查询按钮
          children.push(
            <Col span={12} key={btnList[i].name} style={{ marginTop: '3px', textAlign: 'center' }} className='colbox lastBtn' xs={16} sm={12} md={12} lg={12} xl={12}>
              <Button
                type={btnList[i].type}
                name={btnList[i].name}
                htmlType="submit" className='seachBtn'
                style={{ background: btnList[i].color }}
                onClick={this.btnClick}
                loading={this.state.loading}
              >
                {btnList[i].ch_name}
              </Button>
            </Col>
          )
        }
      }
    } else {
      children.push(
        <Col span={6} key={btnList[0].name} style={{ marginTop: '3px', textAlign: 'center' }} className='colbox lastBtn' xs={16} sm={12} md={12} lg={12} xl={6}>
          <Button
            type={btnList[0].type}
            name={btnList[0].name}
            htmlType="submit" className='seachBtn'
            style={{ background: btnList[0].color }}
            onClick={this.btnClick}
          >
            {btnList[0].ch_name}
          </Button>
        </Col>
      )
    }
    return children
  }
  // 表单提交触发的事件处理函数
  handleSearch = e => {
    const { filtrateList } = this.props
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      let valPro = Object.keys(values)
      let obj = {}
      valPro.forEach(item => {
        if (values[item]) {
          return obj[item] = values[item]
        }
      })
      filtrateList(obj)()
    })
  }
  btnClick = (e) => {
    if (e.target.name === 'add') {
      this.addList()
    }
  }
  addList = () => {
    this.setState({
      loading: true
    })
    this.props.form.validateFields((err, values) => {
      let valPro = Object.keys(values)
      let obj = {}
      let arr = []
      valPro.forEach(item => {
        if (values[item]) {
          arr.push(values[item])
          return obj[item] = values[item]
        }
      })
      if (arr.length > 0) {
        if (err) {
          message.error('请勿输入空值')
          this.setState({
            loading: false
          })
          return
        }
        Axios.post('http://localhost:9090/settabledata', obj).then(response => {
          const { data } = response
          if (data.code === 0) {
            this.props.addTableList(data.data)
            message.success('添加成功')
            this.setState({
              loading: false
            })
            this.props.form.resetFields()
          } else {
            message.error('表格内已存在该证件号员工')
            this.setState({
              loading: false
            })
          }
        })
      } else {
        message.error('请勿输入空值')
        this.setState({
          loading: false
        })
      }
    })
  }
  render () {
    return (
      <Form onSubmit={this.handleSearch} className='findForm' hideRequiredMark={true}>
        <Row gutter={24} style={{ margin: 0 }}>{this.getFields()}</Row>
        <Row gutter={24} style={{ margin: 0 }}>{this.getBtn()}</Row>
      </Form>
    )
  }
}

const Findform = Form.create({ name: 'advanced_search' })(AdvancedSearchForm)

export default connect(
  null,
  (dispatch) => ({
    filtrateList (obj) {
      return () => {
        Axios.post('http://localhost:9090/filtrateData', obj).then(response => {
          let { data } = response
          if (data.code === 0) {
            dispatch({
              type: 'global/filtrateListData',
              tableList: data.data,
              length: data.data.length
            })
          } else {
            dispatch({
              type: 'global/filtrateListData',
              tableList: []
            })
          }
        })
      }
    },
    addTableList (data) {
      dispatch({
        type: 'global/addSetpeople',
        data
      })
    }
  })
)(Findform)
